Vue.component('list', {
  props: {
    list: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  render: function (h) {
    var _this = this
    var list = []
    console.log(this.list)
    this.list.forEach(function (msg, index) {
      var node = h(
        'div', {
          class: {
            'list-item': true
          }
        },
        [
          h(
            'span',
            msg.name + ': '
          ),
          h(
            'div', {
              class: {
                'list-msg': true
              }
            },
            [
              h(
                'p',
                msg.message
              ),
              h(
                'a', {
                  class: {
                    'list-replay': true
                  },
                  on: {
                    click() {
                      _this.handleDel(index)
                    }
                  }
                }, '删除'),
              h(
                'a', {
                  class: {
                    'list-replay': true
                  },
                  on: {
                    click() {
                      _this.handleReply(index)
                    }
                  }
                }, '回复')
            ])
        ])
      list.push(node)
    })
    if (this.list.length) {
      return h(
        'div', {
          class: {
            'list': true
          }
        }, list)
    } else {
      return h(
        'div', {
          class: {
            'list-nothing': true
          }
        },
        '留言列表')
    }
  },
  methods: {
    handleReply(index) {
      this.$emit('reply', index)
    },
    handleDel(index) {
      this.list.splice(index, 1)
    }
  },
})